<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 规则字符编码，防止乱码 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例</title>
    <style>
        .loginBox{
            width: 600px;
            height: 400px;
            border: 1px solid;
            /* 盒模型 */
            margin: 50px auto;/*上下50、左右居中*/
            background: lightblue;
            /* 隐藏元素语法：display: none; */
            display: none;
        }
    </style>
</head>
<body>
    <!-- 
    设置或获取元素css属性：(元素.style.属性)
        元素.style.width 
        元素.style.fontSize（当css属性由两个单词组成，比如font-size，
        这类属性在js使用驼峰标识） 
    -->
    <button id="login">登录</button>
    <hr>
    <!-- 登录框盒子 -->
    <div class="loginBox">
        <!-- 实体字符&times;代表x号 -->
        <button>&times;</button>
        <h1>
            忍一时越想越气，退一步越想越亏
        </h1>
    </div>
    <!-- 需求：点击登录按钮时弹出登录框，点击关闭按钮时关闭登录框、类似于网抑云 -->
</body>
</html>